<!-- 逻辑 -->
<script setup lang="ts">
// <!-- 1. 定义状态变量 -->
import { ref } from 'vue'
// const msg = ref('Hallo')
const msg = ref('<button>点我试试</button>')
const isShow = ref(false)

// 年龄
const age = ref(13)
</script>

<!-- 结构 -->
<template>
  <!-- 2. 渲染到页面上 -->
  <!-- v-html 标签会解析 -->
  <h2 v-html="msg"></h2>
  <!-- v-text 无论是什么都当做内容解析（字符串） -->
  <h2 v-text="msg"></h2>
  <!-- v-html，v-text 直接替换标签内部的所有内容
       如果要部分替换：{{ }} 插值表达式(用的是最多的)
       如果要全部替换:
        解析标签: v-html
        不解析标签: v-text
   -->
  <h2>v-show 控制</h2>
  <img v-show="isShow" src="https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800"
    alt="" />
  <h2>v-if 控制</h2>
  <img v-if="isShow" src="https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800"
    alt="" />
  <!-- 
    v-show：通过控制 display 切换显示 or 隐藏
    v-if: 直接通过移除或者添加元素来实现 显示 or 隐藏
    功能上：没有区别都可以切换 显示 or 隐藏
    适用场景略有不同: 
      频繁的切换显示 or 隐藏 v-if 不推荐，v-show 更适合
      内部有很多元素，但是 不需要一上来就显示 v-if 更适合，v-show 不适合（默认就会创建）
    如非必要，v-show 就够了
  -->
  <button @click="isShow = !isShow">切换显示</button>

  <!-- v-if 结合 v-else-if 和 v-else 使用 -->
  <h2 @click="age++">age:{{ age }}</h2>
  <h3 v-if="age < 18">偷偷去网吧</h3>
  <h3 v-else-if="age >= 18 && age < 25">光明正大去网吧</h3>
  <h3 v-else>住在网吧</h3>
 
  <!-- v-show，v-if 控制一堆标签的显示 or 隐藏 -->
  <div v-show="isShow">
    <img src="https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" />
    <img src="https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" />
    <img src="https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" />
    <img src="https://img1.baidu.com/it/u=446220267,22939034&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="" />
  </div>
</template>

<!-- 样式 -->
<style scoped></style>
<style scoped>
img {
  width: 200px;
}
</style>